<template>
<div class="shop flex-column">
    <div class="header flex-center-space-between">
        <div></div>
        <van-button type="danger" size="mini" style="width: 70px" round plain @click="edit = !edit">{{ edit ? '完成' : '编辑' }}</van-button>
    </div>
    <div class="shop-box overflow-y">
        <template v-if="list.length === 0">
            <van-empty image="search" description="暂无商品，快去加购吧" />
        </template>
        <template v-else>
            <div class="item flex-center-space-between mb10" v-for="(item, index) in list" :key="index">
                <div class="checkbox flex-center-end" v-show="edit">
                    <van-checkbox v-model="item.select" checked-color="#ee0a24"></van-checkbox>
                </div>
                <div class="shop-box-data flex-1 flex-center">
                    <RouterLink :to="`/product?id=${item.id}`">
                        <van-image
                            class="img"
                            fit="contain"
                            :src="item.cover_img"
                            lazy-load
                        />
                    </RouterLink>
                    <div class="msg flex-1 text-left ">
                        <div class=" blod name van-multi-ellipsis--l2">
                            {{ item.name }}
                        </div>
                        <div class="text-gray font-size-12">
                            <div class="flex-center padd">
                                <div class="flex-1">品牌：{{ item.brand_name }}</div>
                                <div class="flex-1"><van-icon name="location-o" />{{ item.province }}</div>
                            </div>
                            <div class="padd flex-center-space-between">
                                <span class="price blod">￥{{ item.price }} 元</span>
                                <span>库存数量：{{ item.stock }} 套</span>
                            </div>
                        </div>
                        <!-- <div class="tag flex-center-space-between font-size-12" style="margin-top: 0.1rem">
                            <van-tag :type="typeMode(item.type)[0]" class="tag-" plain>{{ typeMode(item.type)[1] }}</van-tag>
                            <span class="price blod">认证会员可见</span>
                        </div> -->
                    </div>
                </div>
            </div>

        </template>
    </div>

    <div class="footer flex-center-space-between" v-show="edit">
        <van-checkbox :value="allCheck" checked-color="#ee0a24" @click="allChange">全选</van-checkbox>
        <van-button type="danger" size="small" round @click="del">取消收藏</van-button>
    </div>
</div>
</template>

<script>
export default {
    data () {
        return {
            list: [
                // {
                //     // date: '7月2日',
                //     // childs: [
                //     //     { tit: 'GOODSGOODSGOODSGOODSGOODS', brand: 'SKF', type: 0 },
                //     //     { tit: 'GOODSGOODSGOODSGOODSGOODS', brand: 'SKF', type: 1 },
                //     //     // { tit: 'GOODSGOODSGOODSGOODSGOODS', brand: 'SKF', type: 2 },
                //     //     // { tit: 'GOODSGOODSGOODSGOODSGOODS', brand: 'SKF', type: 3 }
                //     // ]
                // },
                // {
                //     date: '7月3日',
                //     childs: [
                //         { tit: 'GOODSGOODSGOODSGOODSGOODS', brand: 'SKF', type: 0 },
                //         // { tit: 'GOODSGOODSGOODSGOODSGOODS', brand: 'SKF', type: 1 },
                //         // { tit: 'GOODSGOODSGOODSGOODSGOODS', brand: 'SKF', type: 2 },
                //         // { tit: 'GOODSGOODSGOODSGOODSGOODS', brand: 'SKF', type: 3 }
                //     ]
                // }
            ],
            edit: false
        }
    },
    computed: {
        allCheck () {
            if (this.list.length === 0) return false
            return this.list.every(v => v.select)
        }
    },
    created () {
        this.getList()
    },
    methods: {
        allChange () {
            const isCheck = !this.allCheck
            console.log(isCheck)
            this.list.forEach((val, i) => {
                this.$set(this.list[i], 'select', isCheck)
            })
        },
        del () {
            const list = this.list.filter(goods => goods.select).map(item => ({ goods_id: item.id }))
            // this.list = list
            this.$goods.goodsColl(list, 0).then(() => {
                this.$toast('商品已从收藏夹移除')
                this.getList()
            })
        },

        getList () {
            // 获取收藏列表
            this.$buyer.getCoollList().then(res => {
                // console.log(res)
                this.list = res.data.list
            })
        },

        typeMode (v) {
            switch (v) {
                case 0:
                    return ['danger', '渠道商']
                case 1:
                    return ['primary', '经销商']
                case 2:
                    return ['success', '生产厂家']
                case 3:
                    return ['primary', '自营']
            }
        }
    }
}
</script>

<style lang="less" scoped>
.header {
    height: 50px;
    padding: 0 20px;
}

.item {
    height: 110px;
    background-color: #fff;
    &:last-child {
        margin-bottom: 20px;
    }
    .checkbox {
        width: 40px
    }
    .shop-box-data {
        padding-left: 10px;
        padding-right: 20px;
        .img {
            height: 80px;
            min-width: 80px;
            max-height: 80px;
            max-width: 80px;
            width: 80px;
            object-fit: contain;
        }
        .msg {
            // height: 56px;
            padding-left: 10px;
            width: 100%;
            .name {
                width: 100%;
            }
        }
    }
    .tag- {
        border-radius: 4px;
        margin-right: 10px;
    }
}

.padd {
    padding: 2px 0;
}

.footer {
    height: 50px;
    padding: 0 20px;
    background-color: #fff;
}
</style>
